<template>
  <div class="execution">
    <basic-container>
      <el-tabs type="border-card" v-model="activeName" @tab-click="handlerTabsChange" style="margin-top: 20px">
        <el-tab-pane label="全部" name="first">
          <delivery-man-list ref="allManList" ></delivery-man-list>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <delivery-man-list ref="noAuditManList" ></delivery-man-list>
        </el-tab-pane>
        <el-tab-pane label="已通过" name="third">
          <delivery-man-list ref="passManList" ></delivery-man-list>
        </el-tab-pane>
        <el-tab-pane label="无效" name="four">
          <delivery-man-list ref="invalidManList" ></delivery-man-list>
        </el-tab-pane>
      </el-tabs>

    </basic-container>
  </div>
</template>

<script>
  import deliveryManList from './deliveryman-list'
  export default {
    name: 'deliveryman',
    components: {
      deliveryManList
    },
    data() {
      return {
        activeName: 'first',
        currentStatus: ''
      }
    },
    mounted: function () {
      this.$refs.allManList.init()
    },
    computed: {
      // ...mapGetters(['permissions'])
    },
    methods: {
      handlerTabsChange(tab, event) {
        switch (Number(tab.index)) {
          case 0:
            this.currentStatus = ''
            this.$refs.allManList.init()
            break;
          case 1:
            this.currentStatus = 0
            this.$refs.noAuditManList.init({'checkStatus': Number(this.currentStatus)})
            break
          case 2:
            this.currentStatus = 1
            this.$refs.passManList.init({'checkStatus': Number(this.currentStatus)})
            break
          case 3:
            this.currentStatus = 2
            this.$refs.invalidManList.init({'checkStatus': Number(this.currentStatus)})
            break
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
